<template>
  <div class="simple-chat-mid">
    <!-- 消息历史记录 -->
    <MessageHistory
      :messages="messages"
      :loading="loading"
      :has-more="false"
      :typing-users="[]"
    />

    <!-- 消息输入框 -->
    <div class="input-area">
      <div class="input-toolbar">
        <div class="toolbar-left">
          <button class="tool-btn" title="表情">😊</button>
          <button class="tool-btn" title="文件">📁</button>
          <button class="tool-btn" title="图片">📷</button>
          <button class="tool-btn" title="语音">🎤</button>
          <button class="tool-btn" title="剪贴板">📋</button>
          <button class="tool-btn" title="设置">⚙️</button>
        </div>
        <div class="toolbar-right">
          <button class="tool-btn" title="电话">📞</button>
          <button class="tool-btn" title="更多">⚙️</button>
        </div>
      </div>
      <div class="input-box">
        <textarea 
          v-model="inputMessage"
          placeholder="请输入消息..."
          @keydown.enter.prevent="handleSend"
        ></textarea>
        <button 
          @click="handleSend"
          class="send-btn"
          :disabled="!inputMessage.trim()"
        >
          发送
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import MessageHistory from './MessageHistory.vue'

// Props
const props = defineProps({
  messages: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})

// State
const inputMessage = ref('')

// Methods
const handleSend = () => {
  if (!inputMessage.value.trim()) return
  
  console.log('发送消息:', inputMessage.value)
  inputMessage.value = ''
}
</script>

<style scoped>
.simple-chat-mid {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
}

.input-area {
  border-top: 1px solid #e0e0e0;
  background: #fff;
}

.input-toolbar {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  gap: 8px;
}

.tool-btn {
  padding: 4px 8px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.tool-btn:hover {
  background: #f5f5f5;
}

.input-box {
  display: flex;
  padding: 12px 16px;
  gap: 12px;
}

.input-box textarea {
  flex: 1;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 8px 12px;
  resize: none;
  height: 60px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
}

.input-box textarea:focus {
  outline: none;
  border-color: #1890ff;
}

.send-btn {
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.send-btn:hover:not(:disabled) {
  background: #096dd9;
}

.send-btn:disabled {
  background: #d9d9d9;
  cursor: not-allowed;
}
</style>